<template>
	<div class="game-container report-container">
		<div class="params">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
			>
				<el-form-item
					:label="$t('common.choose_merchant') + ':'"
					prop="merchantId"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:placeholder="$t('common.please_choose')"
						@change="handleMerchantChange"
					></merchant-select>
				</el-form-item>
				<el-form-item>
					<el-button
						style="margin-left:10px"
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="loadData"
					>
						{{ $t('common.search') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div v-if="queryStatus">
			<div class="titleStyle">
				<h3>{{ $t('operation.public_config.odds_Limit_set') }}</h3>
				<span>
					{{ $t('operation.public_config.tips') }}
				</span>
			</div>
			<div class="txtStyle">
				<div>
					<el-button
						v-if="btnSave && hasPermission('503011')"
						type="primary"
						@click="handleEdit"
					>
						{{ $t('operation.public_config.edit') }}
					</el-button>
					<el-button
						v-if="!btnSave && hasPermission('503011')"
						type=""
						@click="cancel"
					>
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						v-show="!btnSave"
						type="primary"
						@click="subAddOrEidt"
					>
						{{ $t('common.save') }}
					</el-button>
				</div>

				<el-form
					ref="ruleForm"
					label-width="auto"
					:model="dialogForm"
					:inline="false"
					style="width:800px;margin-left:20px"
				>
					<el-form-item
						:label="
							$t('operation.public_config.sport_invalid_odds') +
								':'
						"
						style="margin-left:-5px"
						prop="activeSwitch"
					>
						<el-switch
							v-if="hasPermission('503012')"
							:value="activeSwitch"
							:active-text="$t('common.open')"
							:inactive-text="$t('common.close')"
							:active-value="1"
							:inactive-value="0"
							@change="handleSwitch($event)"
						></el-switch>
					</el-form-item>
					<el-form-item
						:label="
							$t('operation.public_config.europe_invalid_odds') +
								':'
						"
						prop="european"
						:rules="[
							{
								required: true,
								validator: validateEuropean,
								trigger: 'blur'
							}
						]"
					>
						<span class="lessthan">＜</span>
						<el-input-number
							v-model="dialogForm.european"
							:disabled="btnSave"
							clearable
							:controls="false"
							:maxlength="20"
							size="medium"
							:placeholder="
								$t('common.please_enter') + '1.01~1.89'
							"
							@keyup.enter.native="enterSearch"
						></el-input-number>
					</el-form-item>
					<el-form-item
						:label="
							$t(
								'operation.public_config.hongkong_invalid_odds'
							) + ':'
						"
						prop="Hongkong"
						:rules="[
							{
								required: true,
								validator: validateHongkong,
								trigger: 'blur'
							}
						]"
					>
						<span class="lessthan">＜</span>
						<el-input-number
							v-model="dialogForm.Hongkong"
							:disabled="btnSave"
							:controls="false"
							clearable
							:maxlength="20"
							size="medium"
							:placeholder="
								$t('common.please_enter') + '0.01~0.89'
							"
							@keyup.enter.native="enterSearch"
						></el-input-number>
					</el-form-item>
				</el-form>
			</div>
			<h4 class="txtc">
				{{ $t('operation.public_config.tips2') }}
			</h4>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import { mapGetters } from 'vuex'
import {
	activityConfigCommon,
	activityConfigCommonuUpdataStatus,
	activityConfigCommonuUpdata
} from '@/api/operation'
export default {
	name: routerNames.publicRulesConfig,
	mixins: [list],
	data() {
		return {
			dialogForm: {
				european: '',
				Hongkong: ''
			},
			queryData: {
				merchantId: undefined
			},
			queryStatus: false,
			btnSave: true,
			activeSwitch: 0,
			recordId: '',
			dialogFormlist: []
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
	},
	methods: {
		handleMerchantChange() {
			this.queryStatus = false
		},
		handleEdit() {
			if (this.recordId) {
				return (this.btnSave = false)
			}
		},
		loadData() {
			if (!this.queryData.merchantId) {
				this.loading = true
				this.queryStatus = false
				setTimeout(() => (this.loading = false), 500)
				return
			}
			this.loading = true
			this.btnSave = true
			const params = {
				merchantId: this.queryData.merchantId
			}
			activityConfigCommon(params)
				.then((res) => {
					if (res.data) {
						this.recordId = res.data.id
						this.activeSwitch = res.data.status
						this.dialogFormlist = res.data || []
						this.dialogForm.european =
							res.data.handicapOdds[0].minOdds
						this.dialogForm.Hongkong =
							res.data.handicapOdds[1].minOdds
						this.queryStatus = true
					} else {
						this.$message.error(
							this.$t('operation.public_config.tips3')
						)
						this.queryStatus = false
						this.dialogForm.european = ''
						this.dialogForm.Hongkong = ''
						this.dialogFormlist = []
						this.activeSwitch = 0
						this.recordId = ''
					}
					this.loading = false
				})
				.catch(() => {
					this.dialogForm.european = ''
					this.dialogForm.Hongkong = ''
					this.dialogFormlist = []
					this.activeSwitch = 0
					this.recordId = ''
					this.loading = false
					this.queryStatus = false
				})
		},
		// 修改状态
		handleSwitch(val) {
			const params = {
				merchantId: this.merchantId,
				status: val,
				id: this.recordId
			}
			if (val === 1) {
				this.$confirm(
					`<strong>${this.$t(
						'operation.public_config.confirm_tip1'
					)}</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
						'operation.warning_tips'
					)}</span>`,
					this.$t('common.success_tip'),
					{
						dangerouslyUseHTMLString: true,
						confirmButtonText: this.$t('common.confirm'),
						cancelButtonText: this.$t('common.cancel'),
						type: 'warning'
					}
				)
					.then(() => {
						activityConfigCommonuUpdataStatus(params).then(
							(res) => {
								this.$message({
									type: 'success',
									message: this.$t('common.submit_success')
								})
								this.loadData()
							}
						)
					})
					.catch(() => {})
			} else {
				this.$confirm(
					`<strong>${this.$t(
						'operation.public_config.confirm_tip2'
					)}</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
						'operation.warning_tips'
					)}</span>`,
					this.$t('common.success_tip'),
					{
						dangerouslyUseHTMLString: true,
						confirmButtonText: this.$t('common.confirm'),
						cancelButtonText: this.$t('common.cancel'),
						type: 'warning'
					}
				)
					.then(() => {
						this.$api
							.getOperatactivityConfigCommonupdateStatus(params)
							.then(() => {
								this.$message({
									type: 'success',
									message: this.$t('common.submit_success')
								})
								this.loadData()
							})
					})
					.catch(() => {})
			}
		},
		subAddOrEidt() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					const params = {
						id: this.recordId,
						handicapOdds: [
							{
								minOdds: this.dialogForm.european,
								handicap: 'european'
							},
							{
								minOdds: this.dialogForm.Hongkong,
								handicap: 'Hongkong'
							}
						]
					}
					activityConfigCommonuUpdata(params).then((res) => {
						if (res?.code === 200) {
							this.$message.success(
								this.$t('common.submit_success')
							)
							this.pageNum = 1
							this.loadData()
							this.btnSave = true
						}
						this.dialogFormVisible = false
					})
				}
			})
		},
		cancel() {
			this.btnSave = true
			this.$refs.ruleForm.resetFields()
			this.dialogForm.european = this.dialogFormlist.handicapOdds[0].minOdds
			this.dialogForm.Hongkong = this.dialogFormlist.handicapOdds[1].minOdds
		},
		validateEuropean(rule, value, callback) {
			if (value !== 0 && (!value || value === '')) {
				callback(this.$t('common.please_enter'))
			} else if (value < 1.01 || value > 1.89) {
				callback(this.$t('common.please_enter') + '1.01~1.89')
			} else {
				callback()
			}
		},
		validateHongkong(rule, value, callback) {
			if (value !== 0 && (!value || value === '')) {
				callback(this.$t('common.please_enter'))
			} else if (value < 0.01 || value > 0.89) {
				callback(this.$t('common.please_enter') + '0.01~0.89')
			} else {
				callback()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.lessthan {
	color: aliceblue;
	background-color: black;
	display: inline-block;
	width: 38px;
	line-height: 34px;
	text-align: center;
	font-weight: bold;
	font-size: 17px;
	margin-right: -4px;
	z-index: 999;
	position: relative;
}
.titleStyle {
	color: rgb(48, 158, 252);
	display: flex;
	span {
		padding-top: 24px;
		padding-left: 14px;
		color: rgb(168, 161, 161);
	}
}
.btnsyl {
	margin-top: 20px;
}
.txtStyle {
	display: flex;
}
.txtc {
	color: red;
	padding-left: 228px;
	padding-top: 50px;
}
</style>
